<template>
  <el-dialog :visible.sync="dialogVisible"
             @close="handleCancel"
             :title="dialogTitle">
    <!-- 对话框内容 -->
    <el-form ref="form"
             :model="formData"
             label-width="100px">
      <!-- 根据数据对象动态生成表单项 -->
      <el-form-item v-for="(item, key) in formData"
                    :label="formatLabel(key)"
                    :key="key">
        <el-input v-model="formData[key]"
                  :disabled="key === firstKey"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <!-- 自定义确定按钮的事件 -->
      <el-button @click="handleConfirm"
                 type="primary">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    data: {
      type: Object, // 传递的对象数据
      required: true
    },
    dialogTitle: {
      type: String, // 对话框标题
      default: '编辑'
    },
    visible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      dialogVisible: false,
      formData: {} // 表单数据对象
    };
  },
  watch: {
    data: {
      immediate: true,
      handler (newValue) {
        // 监听传递的对象数据，更新表单数据对象
        this.formData = { ...newValue };
        // 禁止更改第一项
        this.firstKey = Object.keys(this.formData)[0];
      }
    },
    visible: {
      immediate: true,
      handler (val) {
        this.dialogVisible = val
      }
    }
  },
  methods: {
    handleConfirm () {
      // 自定义确定按钮的事件逻辑
      // 在此处编写您希望在确定按钮上触发的逻辑代码
      // 可以根据需要传递参数或调用其他方法
      // 示例：触发一个自定义事件，并传递表单数据对象
      this.$emit('custom-confirm', this.formData);

      // 关闭对话框
      this.dialogVisible = false;
    },
    handleCancel () {
      // 取消按钮的事件逻辑
      // 在此处编写取消按钮的逻辑代码
      // 示例：关闭对话框
      this.dialogVisible = false;
      this.$emit("custom-close")
    },
    // 美化label
    formatLabel (key) {
      // 根据需要进行label的格式化，这里可以添加逻辑来美化label的显示
      // 例如，将key转换为首字母大写的形式
      const formattedLabel = key.charAt(0).toUpperCase() + key.slice(1);
      return formattedLabel;
    },
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
